<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/pagedisplace.css"/>
    <title>页面置换算法</title>
</head>
<body>

<div id="app">
    <div id="controls">
        <div class="left">
            <div class="control-btns">
                <div class="layui-form-item blocknuminput">
                    <label class="layui-form-label">内存块数</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required  lay-verify="required" v-model="blocknum" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="start-btn" @click="start"><i class="layui-icon layui-icon-play" style="font-size: 30px;"></i></div>
                <div class="stop-btn" @click="stop"><i class="layui-icon layui-icon-pause" style="font-size: 30px;"></i></div>
            </div>
            <div class="layui-form-item blocknumlistinput">
                <label class="layui-form-label">页面号序列</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required   lay-verify="required" v-model="pagenumlist" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="right">

        </div>
    </div>
    <div id="windows">
        <div id="fifo">
            <div class="title">先进先出置换(FIFO)算法</div>
            <div class="info">缺页次数: {{counts[0]}}</div>
            <div class="info">当前访问页面号: <span class="pagenumspan">{{fifovisitinfo}}</span></div>
            <div class="info">{{fifovisitinfo2}}</div>
            <div class="memory">
                <div v-for="i in fifoblocknumlist" class="block fifoblock">{{i}}</div>
            </div>
        </div>
        <div id="lru">
            <div class="title">最近最久未使用置换(LRU)算法</div>
            <div class="info">缺页次数: {{counts[1]}}</div>
            <div class="info">当前访问页面号: <span class="pagenumspan">{{lruvisitinfo}}</span></div>
            <div class="info">{{lruvisitinfo2}}</div>
            <div class="memory">
                <div v-for="(i,index) in lrublocknumlist" class="block lrublock">{{i}}</div>
            </div>
        </div>
        <div id="lfu">
            <div class="title">近期最少使用置换(LFU)算法</div>
            <div class="info">缺页次数: {{counts[2]}}</div>
            <div class="info">当前访问页面号: <span class="pagenumspan">{{lfuvisitinfo}}</span></div>
            <div class="info">{{lfuvisitinfo2}}</div>
            <div class="memory">
                <div v-for="i in lfublocknumlist" class="block lfublock">{{i}}</div>
            </div>
        </div>
        <div id="opt">
            <div class="title">最佳置换(OPT)算法</div>
            <div class="info">缺页次数: {{counts[3]}}</div>
            <div class="info">当前访问页面号: <span class="pagenumspan">{{optvisitinfo}}</span></div>
            <div class="info">{{optvisitinfo2}}</div>
            <div class="memory">
                <div v-for="i in optblocknumlist" class="block optblock">{{i}}</div>
            </div>
        </div>

    </div>
</div>

<script src="js/pagedisplace.js"></script>
<div id="foo"/>
</body>
</html>
